{extend name="index/index" /}

{block name="main"}
<style type="text/css">
    .img{
        width: 700px;height: 150px;
    }
    .img_title{
        width: 700px;height: 50px;
    }
    .img_title_icon{
        width: 100px;height: 50px;float: left;line-height: 50px;text-align: center;
    }
    .img_title_bg{
        width: 600px;height: 50px;float: left;line-height: 50px;text-align: center;
    }
    .img_main_icon{
        width: 100px;height: 100px;padding:25px;float: left;
    }
    .img_main_bg{
        width: 533px;height: 100px;float: left;margin-left: 33px;
    }
    .upload_btn{
        width: 700px;height: 35px;
    }
    .upload_btn_icon{
        width: 80px;height: 35px;float: left;margin-left: 10px;
    }
    .upload_btn_bg{
        width: 200px;height: 35px;float: left;margin-left: 235px;
    }
</style>

<div class="tpl-content-wrapper">
    <div class="tpl-content-page-title">
        蒸汽男孩 专区编辑
    </div>
<ol class="am-breadcrumb">
    <li><a href="{:url('admin/index/index')}" class="am-icon-home">首页</a></li>
    <li><a href="{:url('admin/section/index')}">专区列表</a></li>
    <li class="am-active">专区编辑</li>
</ol>
<div class="tpl-portlet-components" style="width: 750px;">
    <div class="portlet-title">
        <div class="caption font-green bold">
            <span class="am-icon-code"></span> 编辑
        </div>
    </div>
    <div class="tpl-block">
        <div class="am-g">
            <div class="am-u-sm-12">
                <form class="am-form" action="{:url('admin/area/update',['id'=>$data['id']])}" method="post" enctype="multipart/form-data">
                    <p>
                        <div class="img">
                            <div class="img_title">
                                <div class="img_title_icon">
                                    头像:
                                </div>
                                <div class="img_title_bg">
                                    背景:
                                </div>
                            </div>
                            <div class="img_main">
                                <div class="img_main_icon">
                                    {if $data['icon'] == ''}
                                    <img class="am-radius" src="/static/index/picture/mr.png" width="50" height="50"/>
                                    {else /}
                                    <img class="am-radius" src="/uploads/{$data['icon']}" width="48" height="48"/>
                                    {/if}
                                </div>
                                <div class="img_main_bg">
                                    {if $data['bg'] == ''}
                                    <img class="am-radius" src="/static/index/images/logo_dw.jpg" width="533" height="100" />
                                    {else /}
                                    <img class="am-radius" src="/uploads/{$data.bg}" width="533" height="100" />
                                    {/if}
                                </div>
                            </div>
                        </div>
                    </p>
                    <p>
                        专区：
                        <input name="a_name" type="text" class="am-form-field am-radius" style="width: 250px;" value="{$data.a_name}" placeholder="请输入专区名"/>
                    </p>
                    <p>版块：
                        <select id="doc-select-1" style="width: 200px;" name="sec_id">
                            {volist name="list" id="list"}
                            <option value="{$list.id}" {$data.sec_id == $list.id ? 'selected' : ''}>{$list.name}</option>
                            {/volist}
                        </select>
                    </p>
                    <div class="upload_btn">
                        <div class="upload_btn_icon">
                            <div class="am-form-group am-form-file">
                                <button type="button" class="am-btn am-btn-danger am-btn-sm">上传头像</button>
                                <input id="upload_icon" type="file" name="icon">
                            </div>
                        </div>
                        <div class="upload_btn_bg">
                            <div class="am-form-group am-form-file">
                                    <button type="button" class="am-btn am-btn-danger am-btn-sm">
                                    <i class="am-icon-cloud-upload"></i> 选择要上传的背景</button>
                                    <input id="upload_bg" type="file" name="bg">
                            </div>
                        </div>
                    </div>
                    <div class="img_main">
                        <div class="img_main_icon">
                            <canvas id="icon" width="50" height="50"></canvas>
                        </div>
                        <div class="img_main_bg">
                            <canvas id="bg" width="533" height="100"></canvas>
                        </div>
                    </div>
                    <button class="am-btn am-btn-success" style="margin-top: 50px;width: 100px;margin-left: 290px;">提交</button>
                </form>
            </div>
        </div>
    </div>
    <div class="tpl-alert"></div>
</div>

<!--头像上传显示-->
<script type="text/javascript">
var input1 = document.getElementById("upload_icon");
if(typeof FileReader==='undefined'){
     input1.setAttribute('disabled','disabled');
}else{
     input1.addEventListener('change',readFile,false);
}
function readFile(){
    var file = this.files[0];
    if(!/image\/\w+/.test(file.type)){
        alert("文件必须为图片！");
        return false;
    }
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e){
        var image = new Image();
        image.src = e.target.result;
        var max=50;
        image.onload = function(){
            var canvas = document.getElementById("icon");
            var ctx = canvas.getContext("2d");
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(image, 0, 0, 50, 50);
        };
    }
};
</script>
<!--头像上传显示END-->
<!--背景上传显示-->
<script type="text/javascript">

var input2 = document.getElementById("upload_bg");
if(typeof FileReader==='undefined'){
     input2.setAttribute('disabled','disabled');
}else{
     input2.addEventListener('change',readFile,false);
}
function readFile(){
    var file = this.files[0];
    if(!/image\/\w+/.test(file.type)){
        alert("文件必须为图片！");
        return false;
    }
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e){

        var image = new Image();
        image.src = e.target.result;
        var max=533;
        image.onload = function(){
            var canvas = document.getElementById("bg");

            var ctx = canvas.getContext("2d");
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(image, 0, 0, 533, 100);
        };
    }
};
</script>
<!--背景上传END-->

{/block}